<!-- 订单详情页 -->
{% extends 'personalLayout.html' %}
{% load static %}
{% block title %}
    <title>订单详情</title>
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/orderStyles.css' %}">
    <link rel="stylesheet" href="{% static 'css/orderDetail.css' %}">
{% endblock %}
{% block content %}
    <!-- 外层容器 -->
    <div class="container-box">
        <!-- 标题 -->
        <div class="my-title">
            <h3><i class="fa fa-vcard"></i> 订单详情</h3>
        </div>
        <div class="box">
            <!-- 消息记录 -->
            <div class="card my-card">
                <div class="card-header" style="background-color:#d8e3e9">
                    <span><i class="fa fa-exclamation-circle"></i> 沟通情况</span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                            style="float:right">
                        添加新任务
                    </button>
                </div>
                <div class="card-body my-card-body" style="height:360px;">

                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">消息详情</th>
                            <th scope="col">计划完成时间</th>
                            <th scope="col">创建时间</th>
                            <th scope="col">计划状态</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for key,val in result.show_detail.items %}
                            <tr>
                                <td>
                                    {% for msg in val.0 %}
                                        {{ msg }}
                                    {% endfor %}
                                </td>
                                <td>{{ key }}</td>
                                <td>{{ val.2 }}</td>
                                <td>{{ val.1 }}</td>
                                <td>
                                    <button data-order-del-id="{{ form.orderId.value }}" type="button"
                                            class="btn btn-danger">删除
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 订单表单提交 -->
            <form class="form-horizontal form" id="order-detail-form" method="POST">
                {% csrf_token %}
                <!-- 基本信息 -->
                <div class="card my-card">
                    <div class="card-header" style="background-color:#d8e3e9">
                        <span><i class="fa fa-id-badge"></i> 基本信息</span>
                    </div>
                    <div class="card-body my-card-body">
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-address-card-o"></i> 订单编号</span>
                            {{ form.orderId }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-drivers-license"></i> 员工编号</span>
                            {{ form.userId }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-calendar"></i> 婚宴时间</span>
                            {{ form.marryTime }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-automobile"></i> 婚宴地点</span>
                            {{ form.marryPlace }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-user"></i> 姓名</span>
                            <span>新郎</span>
                            {{ form.Bridegroom_name }}
                            <span>新娘</span>
                            {{ form.Bride_name }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-phone"></i> 电话</span>
                            <span>新郎</span>
                            {{ form.Bridegroom_phone }}
                            <span>新娘</span>
                            {{ form.Bride_phone }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-address-card"></i> 地址</span>
                            <span>新郎</span>
                            {{ form.Bridegroom_address }}

                        </div>
                        <div class="inputTime">
                            <span>新娘</span>
                            {{ form.Bride_address }}
                        </div>
                    </div>
                </div>
                <!-- 婚礼资源 -->
                <div class="card my-card">
                    <div class="card-header" style="background-color:#d8e3e9">
                        <span><i class="fa fa-archive"></i> 婚礼资源</span>
                    </div>
                    <div class="card-body my-card-body" style="height:250px;">
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-child"></i> 主持</span>
                            {{ form.host_employeeId }}
                            <span class="card-little-title"><i class="fa fa-dot-circle-o"></i> 摄像</span>
                            {{ form.cameraman_employeeId }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-film"></i> 摄影</span>
                            {{ form.photographer_employeeId }}
                            <span class="card-little-title"><i class="fa fa-street-view"></i> 傧相</span>
                            {{ form.ushers_employeeId }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-user-secret"></i> 礼服</span>
                            {{ form.full_dress_companyId }}
                            <span class="card-little-title"><i class="fa fa-truck"></i> 车队</span>
                            {{ form.motorcade_companyId }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-star"></i> 婚庆</span>
                            {{ form.wedding_companyId }}
                            <span class="card-little-title"><i class="fa fa-magic"></i> 化妆</span>
                            {{ form.dresser_employeeId }}

                        </div>
                        <div class="inputTime" style="width:93%">
                            <span class="card-little-title"><i class="fa fa-gift"></i> 喜礼</span>
                            {{ form.wedding_gift_companyId }}
                        </div>
                    </div>
                </div>
                <!-- 其他信息 -->
                <div class="card my-card">
                    <div class="card-header" style="background-color:#d8e3e9">
                        <span><i class="fa fa-exclamation-circle"></i> 其他信息</span>
                    </div>
                    <div class="card-body my-card-body">
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-inbox"></i> 渠道</span>
                            {{ form.channel }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-reorder"></i> 管家类型</span>
                            {{ form.type }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-exchange"></i> 人员分配</span>
                            {{ form.assignment }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-sign-language"></i> 彩排</span>
                            {{ form.rehearsal }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-list"></i> 流程表</span>
                            {{ form.process }}
                        </div>
                        <div class="inputTime">
                            <span class="card-little-title"><i class="fa fa-sticky-note"></i> 备注</span>
                            {{ form.note }}
                        </div>
                    </div>
                </div>
                <!-- 按钮域 -->
                <div class="my-button">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <a class="btn btn-secondary" href={{ result.current_url }}>返回</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block other %}
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="AddModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">添加任务</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="id-task-info">任务详情</label>
                    <textarea class="form-control" name="task_info" id="id-task-info" cols="30" rows="1"></textarea>
                    <label for="id-task-time">计划完成时间</label>
                    <input class="form-control" type="date" id="id-task-time" name="task_time">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-task-info"
                            data-order-id="{{ form.orderId.value }}">确认添加
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'js/detailsUpdate.js' %}"></script>
{% endblock %}